<template>
  <canvas class="fixed_arc-line arc-line__line" width="0">
  </canvas>
</template>
<script>
import { Component } from './drawLine.js'
export default {
  props: {
    linkInfo: Object
  },
  data () {
    return {
      boxSize: {
        width: 500,
        height: 76,
        offset: 15
      },
      lineStyle: {
        color: '#9ad2ec',
        width: 1
      },
      arcStyle: {
        radius: 12,
        width: 26,
        hoverColor: '#138DC7'
      },
      ctx: null,
      clickCanvas: true
    }
  },
  computed: {
    fiexdarcStatus () {
      return this.clickCanvas
    }
  },
  watch: {
    fiexdarcStatus (val) {
      if (val) this.makeArc()
    }
  },
  mounted () {
    this.ctx = this.$el.getContext('2d')
    this.makeArc()
    this.$el.addEventListener('mousemove', this.mousemoveCallback)
    this.$el.addEventListener('mouseout', this.onmouseoutCallback)
  },
  methods: {
    mousemoveCallback (e) {
      this.openThatCav()
      this.makeArc(this.arcStyle.hoverColor)
    },
    onmouseoutCallback (e) {
      if (!this.clickCanvas) {
        // this.$el.style.display = 'none'
        this.makeArc(this.arcStyle.hoverColor)
      } else {
        this.makeArc()
      }
    },
    openThatCav () {
      this.$el.style.display = 'block'
    },
    closeThatCav () {
      this.$el.style.display = 'none'
    },
    setCanvasP (data) {
      let cavTop, cavLeft
      cavTop = data.position[1] + this.boxSize.height
      cavLeft = data.position[0] + 250 - 26 / 2
      this.$el.style.display = 'block'
      this.$el.style.top = cavTop + 'px'
      this.$el.style.left = cavLeft + 'px'
      this.arcCanvasEvent(this.$el, this.ctx, { node: [data, []], postion: { cavTop: cavTop, cavLeft: cavLeft }, fromfixe: 'fiex' })
    },
    makeArc  (color) {
      this.$el.width = 26
      this.$el.height = 26
      if (this.$el.getContext) {
        this.ctx.beginPath()
        this.ctx.lineWidth = 1
        this.ctx.strokeStyle = color || this.lineStyle.color
        this.ctx.arc(this.arcStyle.width / 2, this.arcStyle.width / 2, this.arcStyle.radius, 0, Math.PI * 2, false)
        this.ctx.stroke()
        this.repeatBeginPath(this.ctx)
      }
    },
    // let flag = true
    arcCanvasEvent  (canvas, ctx, lacation) {
      let that = this
      // canvas.onmousedown = function (e) {
      // }
      // canvas.onmousemove = function (e) {
      //   // if (flag) {
      //   //   flag = false
      //   // }
      //   that.ctx.strokeStyle = that.arcStyle.hoverColor
      //   // var x = e.clientX
      //   // var y = e.clientY
      //   // if ( ctx.isPointInPath(x, y)) {
      //   //     ctx.fillStyle = 'red';
      //   //     ctx.fill();
      //   // }else{
      //   //     ctx.fillStyle = 'black';
      //   //     ctx.fill();
      //   // }
      // }
      // canvas.onmouseup = function (e) {
      //   store.commit('ADDBLOCKLACATION', null)
      // }
      canvas.addEventListener('click', function (e) {
        e.stopPropagation()
        // store.commit('ADDBLOCKLACATION', lacation)
        document.querySelectorAll('.mystyle').forEach((element, i) => {
          element.style.display = 'none'
        })
        Component.$emit('botBlockButs', lacation)
        that.clickCanvas = false
        that.makeArc(that.arcStyle.hoverColor)
      })
    },
    repeatBeginPath (cxt) {
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 2, this.arcStyle.width / 4)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 2, this.arcStyle.width / 4 + this.arcStyle.width / 2)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 4, this.arcStyle.width / 2)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 4 + this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.stroke()
    }
  }
}
</script>
<style>
  .fixed_arc-line{
    display: none;
    position: absolute;
    cursor: pointer;
    background-color: #fff;
  }
</style>
